<template>
    <div>

<a href="/add">新增会员</a>
        <br>
    <h1>首页</h1>
    <table class="table">
        <thead> 
            <tr>
                <td>
                    <input type="checkbox" v-model="state" @change="sellectidlist">
                </td>
                <td>id</td>
                <td>name</td>
                <td>password</td>
                <td>isDelete</td>
                <td>img</td>
                <td>memberLevelId</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody> 
            <tr v-for="d in data">
                <td>
                    <input type="checkbox" :value="d.id" v-model="selelctid">
                </td>
                <td>{{d.id}}</td>
                <td>{{d.name}}</td>
                <td>{{d.password}}</td>
                <td>{{d.isDelete}}</td>
                <td>

                    <img :src="'https://localhost:7035'+d.img" style="height: 100px;width: 100px;;">

                </td>
                <td>{{d.memberLevelId}}</td>
                <td>
                    <input type="button" value="编辑" @click="editer(d.id)">
                </td>
            </tr>
        </tbody>
    </table>
    <input type="number" name="" id="">
    <input type="button" value="批量逻辑删除" @click="logicedelete">

    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()

//编辑
const editer=(val)=>{
    router.push({path:'/editer',query:{id:val}})
}


//保存全选全取消的状态
const state=ref(false);
const selelctid=ref([])  //保存多个选中的编号
//全选 全取消
const sellectidlist=()=>{
    if(state.value){
        selelctid.value= []  //先清空再保存所有id
        data.value.forEach((e)=>{
            selelctid.value.push(e.id)
        })
    }
    else{
        //清空选项
        selelctid.value= [] 
    }
}

const logicedelete=()=>{
    if(selelctid.value.length==0){
        alert('最少选择一行')
        return;
    }

    if(!confirm("真的删除吗？")){
        return;
    }

    axios.delete("https://localhost:7035/api/Member/LogiceAllDelete",{params:{idstring:selelctid.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('删除成功')
            getdata();
        }
        else{
            alert('删除失败')
        }
    })
   
}


const data=ref([{
    "id": 0,
    "name": "string",
    "password": "string",
    "isDelete": true,
    "img": "string",
    "memberLevelId": 0
  }])
onMounted(()=>{
    getdata()
})
const getdata=()=>{
    axios.get("https://localhost:7035/api/Member/GetMembers").then(res=>{
        data.value= res.data;
    })
}



</script>

<style scoped>

</style>